<template>
  <div class="app-container"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)">
    <div class="title">
      <div class="left"><span class="circle"></span>基本信息</div>
      <div class="right" v-show="!isDisabled">
        <el-button type="primary" size="small" @click="handelSaveFn('0')">暂存</el-button>
        <el-button size="small" @click="handelSaveFn('1')">提交</el-button>
      </div>
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">项目名称</span>
        </label>
        <div class="page-form-item-content">
          <loadingSearchFormProject
            v-bind:projectName="topData.projectName"
            v-on:changeCom="changePro($event)"
            :isDisabled="isDisabled"
          />
          <!-- <el-select
            :disabled="isDisabled"
            @change="handelChangeProject"
            v-model="topData.projectId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in projectListData"
              :key="item.projectId"
              :label="item.pigfarmName"
              :value="item.projectId">
            </el-option>
          </el-select> -->
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同类型</span>
        </label>
        <div class="page-form-item-content">
          <el-select v-model="topData.contractType" @change="handelChangeContract" :disabled="isDisabled" clearable placeholder="请选择" size="small">
            <el-option label="设备" value="1"></el-option>
            <el-option label="水电" value="2"></el-option>
            <el-option label="土建" value="3"></el-option>
          </el-select>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同标题</span>
        </label>
        <div class="page-form-item-content">
          <el-input v-model="topData.contractTitle" :disabled="isDisabled" size="small" maxlength="100" placeholder="请输入合同标题"></el-input>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同编码</span>
        </label>
        <div class="page-form-item-content">
          <el-input v-model="topData.contractNumber" :disabled="isDisabled" size="small" maxlength="100" placeholder="请输入合同编码"></el-input>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">承建单位</span>
        </label>
        <div class="page-form-item-content">
          <el-select v-model="topData.leCode" :disabled="isDisabled" size="small" @change="handelChoseSupplier" placeholder="请选择">
            <el-option
              v-for="item in supplierList"
              :key="item.leCode"
              :label="item.name"
              :value="item.leCode">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同金额(元)</span>
        </label>
        <div class="page-form-item-content">
          <el-input type="number" v-model="topData.contractMoney" :disabled="isDisabled" size="small" maxlength="20"
          oninput="if(value>999999999)value=999999999;value = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));" placeholder="请输入合同金额"></el-input>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">所在公司</span>
        </label>
        <div class="page-form-item-content">
          <loadingSearchFormCompany
            v-bind:companyName="topData.companyName"
            v-on:changeCom="changeCom($event)"
            :isDisabled="isDisabled"
          />
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">申请人</span>
        </label>
        <div class="page-form-item-content">
          {{topData.createName}}
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">申请时间</span>
        </label>
        <div class="page-form-item-content">
          {{topData.createTime}}
        </div>
      </div>

    </div>

    <div class="title" style="border-bottom:none;margin-bottom:0;">
      <div class="left"><span class="circle"></span>承建商匹配流程</div>
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <el-table
        ref="multipleTable"
        :data="bpmDataList"
        border
        size="mini"
        style="width: 100%">
        <el-table-column label="关联" align="center" width="80" >
          <template slot-scope="scope">
            <el-checkbox :disabled="isDisabled" :true-label='1' :false-label='0' v-model="scope.row.flag"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="bpmTitle"
          label="流程名称">
        </el-table-column>
        <el-table-column
          prop="createBy"
          label="流程发起人"
          >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="匹配发起时间"
          >
        </el-table-column>
        <el-table-column
          prop="completeTime"
          label="匹配结束时间"
          >
        </el-table-column>
        <el-table-column label="操作" prop="status" align="center" width="150" >
          <template slot-scope="scope">
            <el-link type="primary"  @click="newWindowBpm(scope.row.instId,'1')">查看流程</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="title" style="border-bottom:none;">
      <div class="left"><span class="circle"></span>承建方账号信息</div>
      <div class="right" v-show="!isDisabled">
      </div>
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item page-form-item4">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">账户名称</span>
        </label>
        <div class="page-form-item-content">
          {{topData.bankAccountName}}
        </div>
      </div>
      <div class="page-form-item page-form-item4">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">银行卡号</span>
        </label>
        <div class="page-form-item-content">
          {{topData.bankAccount}}
        </div>
      </div>
      <div class="page-form-item page-form-item4">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">开户银行</span>
        </label>
        <div class="page-form-item-content">
          {{topData.bankName}}
        </div>
      </div>
      <div class="page-form-item page-form-item4">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">银行行号</span>
        </label>
        <div class="page-form-item-content">
          {{topData.bankCode}}
        </div>
      </div>

      <div class="page-form-item page-form-item3" style="height: 150px;">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同附件</span>
        </label>
        <div class="page-form-item-content">
          <FileUpload v-model='topData.contractFileList' :limit="3" :disabled="isDisabled" />
        </div>
      </div>
    </div>

    <div class="title" style="border-bottom:none;">
      <div class="left"><span class="circle"></span>合同扫描件</div>
      <div class="right" >
        <el-button type="primary" size="small" @click="handelFileFn()" v-if="returnFileBotton == '1'">提交</el-button>
      </div>
    </div>
    <div class="context-warp" style=" overflow: hidden;">
      <div class="page-form-item page-form-item3" style="height: 150px;">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text">合同扫描件</span>
        </label>
        <div class="page-form-item-content">
          <FileUpload v-model='topData.returnFileList' :limit="3" :disabled="returnFileBotton != '1' " />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { makePy } from "@/utils/makePy";
import { getTreeselect ,addFarmInfo,getDetailsById,listSelct,getProjectList,getSupplierList,getBpmDataList,updateFarmInfo,updateRetunFile} from "@/api/contractManagement/technical";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import FileUpload from '@/views/components/fileUpload/index.vue'
import { newWindowBpm } from "@/utils/openBpm";
import loadingSearchFormCompany from '@/views/components/loadingSearchFormCompany/index.vue'
import loadingSearchFormProject from '@/views/components/loadingSearchFormProject/index.vue'
export default {
  name: "technicalDetails",
  components: { Treeselect , FileUpload ,loadingSearchFormCompany,loadingSearchFormProject },
  extends: BaseIndex,
  data() {
    return {
      newWindowBpm,
      pageType:'',
      loading:false,
      isDisabled:false,
      topData:{
        leCode:'',
        createName:'',
        createTime:'',
        contractFileList:[],
        returnFileList:[],
        bankAccountName:'',
        bankAccount:'',
        bankName:'',
        bankCode:'',
        contractType:'',
        contractNumber:'',
        contractTitle:''
      },
      projectListData:[], // 项目名称列表
      supplierList:[{}], // 承建单位 列表
      bpmDataList:[], // 关联流程 列表
      temporaryTitle:'', // 临时项目名称
      returnFileBotton:''
    };
  },
  watch: {

  },
  created() {
    this.pageType = this.$route.query.type

    if(this.$route.query.type == 'add'){
      this.topData.createName = this.$store.state.user.name
      this.topData.createTime = moment().format('YYYY-MM-DD  hh:mm:ss')
    }

    if(this.$route.query.type == 'details' || this.$route.query.type == 'change'){
      if(this.$route.query.type == 'details'){
        this.isDisabled = true;
      }
      if(this.$route.query.type == 'change'){
        this.isDisabled = false;
      }
      this.loading = true;
      getDetailsById(this.$route.query.id).then(
        response => {
          if(response && response.code ===0){

            this.topData = {...response.data}
            this.supplierList.push(this.topData.baseSupplier)
            this.topData.bankAccountName = this.topData.baseSupplier.bankAccountName ;
            this.topData.bankAccount = this.topData.baseSupplier.bankAccount ;
            this.topData.bankName = this.topData.baseSupplier.bankName ;
            this.topData.bankCode = this.topData.baseSupplier.bankCode ;

            this.bpmDataList = response.data.bpmList

            if (this.$route.query.status == '1' && response.data.returnFileBotton == '1') {
              this.returnFileBotton = '1'
            }

          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    }

    // this.remoteMethod(''); // 项目名称下拉 - 初始数据
  },
  methods: {
    // changePro(e){
    //   debugger
    //   this.topData.projectName = e.projectName
    //   this.topData.projectId = e.projectId
    // },
    changePro(e){// 项目下拉 change事件
      this.topData.projectName = e.projectName
      this.topData.projectId = e.projectId


      this.topData.bankAccountName = ''
      this.topData.bankAccount = ''
      this.topData.bankName = ''
      this.topData.bankCode = ''
      this.topData.leCode = ''

      this.temporaryTitle = e.pigfarmName;
      this.topData.contractTitle = this.temporaryTitle + this.choseContractType(this.topData.contractType) + '技改合同'
      let arr = this.makePy(e.pigfarmName)
      this.topData.contractNumber = arr[0]

      // for (let index = 0; index < this.projectListData.length; index++) { // 生成 合同编码 和 合同标题
      //   if (this.projectListData[index].projectId == e) {
      //     this.temporaryTitle = this.projectListData[index].pigfarmName;
      //     this.topData.contractTitle = this.temporaryTitle + this.choseContractType(this.topData.contractType) + '技改合同'

      //     let arr = this.makePy(this.projectListData[index].pigfarmName)
      //     this.topData.contractNumber = arr[0]
      //   }
      // }

      getSupplierList(e.projectId).then( // 承建单位 列表
        response => {
          if(response && response.code ===0){
            this.supplierList = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })

      getBpmDataList(e.projectId).then( // 关联流程 列表
        response => {
          if(response && response.code ===0){
            this.bpmDataList = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })

    },

    changeCom(e){
      this.topData.companyName = e.name
      this.topData.companyId = e.id
    },
    handelFileFn(){
      let data = {
        ...this.topData
      }
      updateRetunFile(data).then( // 承建单位 列表
        response => {
          if(response && response.code ===0){
            this.msgSuccess("成功");
            this.$router.go(-1)
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    handelChangeContract(e){  // 修改合同类型
      this.topData.contractTitle = this.temporaryTitle + this.choseContractType(this.topData.contractType) + '技改合同'
    },
    choseContractType(e){
      if (e == '1') {
        return '设备'
      }
      if (e == '2') {
        return '水电'
      }
      if (e == '3') {
        return '土建'
      }
      return ''
    },
    makePy,
    handelChoseSupplier(e){ // 承建单位下拉 change事件

      for (let index = 0; index < this.supplierList.length; index++) {
        if (this.supplierList[index].leCode == e) {
          this.topData.bankAccountName = this.supplierList[index].bankAccountName ;
          this.topData.bankAccount = this.supplierList[index].bankAccount ;
          this.topData.bankName = this.supplierList[index].bankName ;
          this.topData.bankCode = this.supplierList[index].bankCode ;
        }
      }
    },

    // remoteMethod(query){ // 项目下拉远程搜索
    //   getProjectList(query).then(
    //     response => {
    //       if(response && response.code ===0){
    //         this.projectListData = response.data.records
    //       }else{
    //         this.msgError(response.msg)
    //       }
    //       this.loading = false;
    //     }
    //   );
    // },
    handelSaveFn(e){
      if(!this.topData.projectId) {this.msgError('请选择 项目名称'); return false;}
      if(!this.topData.contractType) {this.msgError('请选择 合同类型'); return false;}
      if(!this.topData.leCode) {this.msgError('请选择 承建单位'); return false;}
      if(!this.topData.companyName) {this.msgError('请填写 所在公司'); return false;}
      var para = {
        ...this.topData,
        status : e,
        bpmList:this.bpmDataList
      }
      this.loading = true;
      if(this.$route.query.type == 'change'){
        updateFarmInfo(para).then(
          response => {
            if(response && response.code ===0){
              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }else{
        addFarmInfo(para).then(
          response => {
            if(response && response.code ===0){
              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }
    },
  }
};
</script>
<style scoped  lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.9375rem 0.9375rem 0.9375rem;
  // padding: 0 0.9375rem 0 0.9375rem;
  background-color: white;
  // border-bottom: 2px solid #ccc ;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #4A75D0;
    margin-right: 10px;
  }
}

.context-warp {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  margin: 15px;
  border-bottom: 1px solid #ebeef3;
  border-right: 1px solid #ebeef3;
  background-color: white;

  .page-form-item {
    width: 33.3%;
    font-size: 14px;
    font-family: "PingFangSC";
    position: relative;
    border-top: 1px solid #ebeef3;
    vertical-align: top;
    height: 66px;
    color: #4d4d4d;
    display: flex;

    .page-form-item-label {
      width: 120px;
      height: 100%;

      .icon {
        color: red;
      }
    }

    .left-border {
      position: absolute;
      height: 100%;
      width: 1px;
      left: 0;
      top: 0;
      background-color: #ebeef3;
      z-index: 999;
    }

    &-label {
      display: inline-block;
      height: calc(100% - 16px);
      background-color: #f9fafd;
      border-right: 1px solid #ebeef3;
      border-left: 1px solid #ebeef3;
      text-align: center;

      .require {
        display: inline-block;
        width: 8px;
        color: #f56c6c;
        vertical-align: -3px;
      }

      &__text {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.3em;
        width: 80%;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }

    .border-right0 {
      border-right: 0;
    }

    &-content {
      display: inline-block;
      vertical-align: top;
      padding: 8px;
      height: calc(100% - 16px);

      &.noLabel {
        border-left: 1px solid #ebeef3;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      &.align-top {
        &::after {
          content: "";
          vertical-align: top;
        }
      }

      &.noPadding {
        padding: 0;
      }
    }

    .el-table th {
      background-color: #f9fafd;
    }

    .el-radio {
      margin-right: 15px;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-input--small .el-input__inner {
      font-size: 12px;
    }

    .el-checkbox {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
      vertical-align: -2px;
    }

    .el-select {
      width: 100%;
    }

    .el-cascader {
      width: 100%;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }

    .el-textarea__inner {
      height: 80px;
    }
    .page-form-item-content {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      .text-box {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
      }

      .slider-box {
        display: flex;
        justify-content: space-between;

        &:first-child {
          flex: 1;
        }
      }
    }
  }

  .page-form-item2{
    width: 50%;
  }
  .page-form-item3{
    width: 100%;
  }
  .page-form-item4{
    width: 25%;
  }
}
</style>
